<script setup>
  import messageApi from '@/apis/message.js'
  import { ref,onMounted } from 'vue'
  const announceData = ref([])
  const isTriggered = ref(false)
  let page = 1
  onMounted(async()=>{
    let res = await messageApi.list(200,page,10)
    console.log(res.data);
    announceData.value = res.data.data.items
  })
  //触底加载更多
  async function onScrollToLower(){
    page++
    let res = await messageApi.list(200,page,10)
    if(res.data.data.items){
      announceData.value.push(...res.data.data.items)
    }
  }
  //下拉刷新
  async function onScrollviewRefresh(){
    page = 1
    isTriggered.value = true
    let res = await messageApi.list(200,page,10)
    announceData.value = res.data.data.items
    isTriggered.value = false
  }
</script>
<template>
  <scroll-view class="scroll-view" refresher-enabled scroll-y
  :refresher-triggered="isTriggered" @scrolltolower="onScrollToLower"
  @refresherrefresh="onScrollviewRefresh">
    <view class="scroll-view-wrapper">
      <view class="message-action">
        <text class="iconfont icon-clear"></text>
        全部已读
      </view>
      <uni-list :border="false">
        <uni-list-item v-for="item in announceData" :key="item.id"
          to="/subpkg_message/content/index"
          ellipsis="1"
          :title="item.title"
          :rightText="item.created"
        >
          <template v-slot:header>
            <text class="dot"></text>
          </template>
        </uni-list-item>
 </uni-list
    ></view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
